import {Button, Card, Divider, Flex, Space, Table} from "antd";
import {useEffect} from "react";


const AdminComponent = () => {

    useEffect(() => {

        // EventBus.listener("message",)

    }, [])



    return (
        <Card title={'Admin Container _ 12345678'} extra={<a>Go back</a>}
              style={{overflowX: "hidden"}}
        >
            <p>Hello the that page is test page.</p>
            <p>Now show a table.</p>
            <Flex gap={40} justify={"space-between"} style={{
                overflowX: "hidden"
            }}>
                <Space size={20}>
                    <Button type={"primary"}>Test Button One</Button>
                    <Button type={"primary"}>Test Button Two</Button>
                </Space>
                <Space size={20}>
                    <Button>③ Refresh</Button>
                    <Button type={"primary"}>+ New Data</Button>
                </Space>
            </Flex>
            <Divider/>
            <Table
                pagination={{
                    defaultPageSize: 20,
                    pageSizeOptions: ["10", "20", "30", "40", "50", "100", "200", "300", "400", "500"]
                }}
                scroll={{x: 800}}
                dataSource={[
                    {pwd: "$bcpwd:lksjifnwi-weff", id: "100000000001", remark: "12345678", name: "Catalina"},
                    {pwd: "$bcpwd:lksjifnwi-weff", id: "100000000002", remark: "12345678", name: "Catalina"},
                    {pwd: "$bcpwd:lksjifnwi-weff", id: "100000000003", remark: "12345678", name: "Catalina"},
                    // {pwd: "$bcpwd:lksjifnwi-weff", id: "100000000004", remark: "12345678", name: "Catalina"},
                    // {pwd: "$bcpwd:lksjifnwi-weff", id: "100000000005", remark: "12345678", name: "Catalina"},
                    // {pwd: "$bcpwd:lksjifnwi-weff", id: "100000000006", remark: "12345678", name: "Catalina"},
                    // {pwd: "$bcpwd:lksjifnwi-weff", id: "100000000007", remark: "12345678", name: "Catalina"},
                    // {pwd: "$bcpwd:lksjifnwi-weff", id: "100000000008", remark: "12345678", name: "Catalina"},
                    // {pwd: "$bcpwd:lksjifnwi-weff", id: "100000000009", remark: "12345678", name: "Catalina"},
                    // {pwd: "$bcpwd:lksjifnwi-weff", id: "100000000010", remark: "12345678", name: "Catalina"},
                ]}
                columns={[
                    {
                        title: 'Data ID',
                        dataIndex: 'id',
                        fixed: "left",
                        width: 150
                    },
                    {
                        title: 'UserName',
                        dataIndex: 'name',
                        width: 150
                    },
                    {
                        title: 'Password',
                        dataIndex: 'pwd',
                        width: 180
                    },
                    {
                        title: 'Account Not Locked',
                        dataIndex: 'AccountNotLocked',
                        width: 180
                    },
                    {
                        title: 'Certificate Not Locked',
                        dataIndex: 'CertificateNotLocked',
                        width: 200
                    },
                    {
                        title: 'Enabled',
                        dataIndex: 'enabled',
                        width: 150
                    },
                    {
                        title: 'Account Not Expire',
                        dataIndex: 'name',
                        width: 180
                    },
                    {
                        title: 'Remark',
                        dataIndex: 'remark',
                        width: 180
                    },
                    {
                        title: 'Option',
                        fixed: "right",
                        width: 180,
                        render: () => {
                            return <a>Edit</a>
                        }
                    }
                ]}
            />
        </Card>
    );
};

export default AdminComponent;